<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios 的 案例 </title>

    <!-- 引入 vue -->
    <script src="https://unpkg.com/vue@3.4.32/dist/vue.global.js"></script>

    <!-- 引入 axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<div id="app">
        <table>
            <tr>
                <td>姓名</td>
                <td>
                    <input type="text" v-model="owner.username" placeholder="请填写姓名">
                </td>
            </tr>
            <tr>
                <td>联系方式</td>
                <td>
                    <input type="text" v-model="owner.tel" placeholder="请填写联系电话">
                </td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <label> <input type="radio" name="sex" v-model="owner.sex" value="1" checked>男</label>
                    <label> <input type="radio" name="sex" v-model="owner.sex" value="2">女</label>
                </td>
            </tr>
            <tr>
                <td>身份证</td>
                <td>
                    <input type="text" v-model="owner.id" placeholder="请填写身份证">
                </td>
            </tr>
            <tr>
                <td>房屋</td>
                <td>
                    <select v-model="owner.houseId">
                        <option value="1">301</option>
                        <option value="2">302</option>
                        <option value="3">303</option>
                        <option value="4">304</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>备注</td>
                <td>
                    <textarea v-model="owner.remark" cols="30" rows="5"></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button @click="add()">添 加</button>
                </td>
            </tr>
        </table>
</div>

<script>

    const {createApp, ref} = Vue;
    const app = createApp({
        setup(){

            let owner = ref({
                username:"",
                tel:"",
                sex:"",
                id:"",
                houseId:"",
                remark:""

            })

            function add(){
                //通过 vue 绑定 拿到数据  data
                //通过axios 把 页面数据发送到 服务器
                axios.post("/owner/add",owner.value)
                    .then(function (data){
                        console.log(data)
                    })
                    .catch(function (error) {    //catch 是 失败执行的函数
                        console.log(error);
                    });
            }
            return {
                owner,
                add
            };
        }
    })
    app.mount('#app')

</script>

</body>
</html>